{include file="public/header" /}
<style>
    body {
        background: #e1e0de;
    }
    * {
        box-sizing: border-box;
    }
    h1,
    h2,
    h3,
    h4 {
        font-weight: 700 !important;
    }
    .layui-card-header {
        width: 100%;
        border-bottom: 1px solid #999 !important;
        padding-left: 5px;
    }
    .layui-card {
        padding: 10px 20px 50px;
    }
    p {
        margin: 0 0 10px !important;
    }
    .layui-container {
        padding: 0 !important;
    }
    img {
        max-width: 100%;
    }
    ::-moz-selection {
        background: #cccccc;
        color: #ffffff;
    }
    ::selection {
        background: #cccccc;
        color: #ffffff;
    }
    .layui-breadcrumb {
        padding-left: 5px;
    }
    .layui-card h1 {
        margin: 10px auto 0;
    }
    .description {
        font-size: 15px;
        font-weight: bold;
        margin: 20px 0;
    }

    .layui-textarea {
        resize: none !important;
    }

    @media screen and (max-width: 800px) {
        .layui-card-header {
            line-height: normal !important;
            font-size: 10px !important;
        }
    }


    .layui-card-body{
        padding: 10px 5px;
    }

    .date{ font-style:italic;color:black;}
    .archives-ul{
        max-height: 220px;
        overflow-y: auto;
    }
    .archives-ul::-webkit-scrollbar{
        width: 5px;
        border-radius: 0px;
        background-color: #D3D4D8;
    }
    .archives-ul::-webkit-scrollbar-thumb{
        -webkit-box-shadow: inset 0 0 6px rgb(0 0 0 / 30%);
        border-radius: 0px;
        background-color: #006DB8;
    }
    .date{overflow: hidden}
    .content-left{
        width:25%;padding: 10px 10px;float: right;
    }
    .content-right{
        width:75%;padding: 10px 10px;float: left;
    }
    @media screen and (max-width: 760px)  {
        .archives-ul{
            max-height: 100px;
            overflow-y: auto;
        }
        .layui-card-phone{
            max-height: 320rem;
        }
        .blog{
            height: 22rem !important;
            overflow: hidden;
        }
       .content-left,.content-right{
           width:100%;
       }
    }

</style>
<div class="layui-container" style='font: 12px/14px arial,helvetica,sans-serif;'>
    <div class="layui-card">
        <span class="layui-breadcrumb" lay-separator="/">
          <a href="/" style="font: 12px/14px arial,helvetica,sans-serif;">{:lang('Home')}</a>
          {foreach $crumbs as $k=>$v }
          <?php if($k!=count($crumbs)-1){?>
          <a href="/{$v['crumbs_url']}" style="font: 12px/14px arial,helvetica,sans-serif;color:#36648A">{$v['alias_name']}</a>
          <?php }else{ ?>
          <a style="font: 12px/14px arial,helvetica,sans-serif;"><cite>{$v['alias_name']}</cite></a>
          <?php } ?>
          {/foreach}
        </span>
        <div class="layui-card-header">
            <h1>{:lang('Blog')}</h1>
        </div>
        <div class="layui-card-body layui-card-phone">
            <div class="layui-row">
                <div class="layui-col-sm9 content-right" style="">
                    {volist name="blog" id="data"}
                    <div class="blog" style="margin:10px 0px;border:1px solid #ccc;height:220px;padding:10px 0px">
                        <a href="{:substr($base_data['current_url'],0,strrpos($base_data['current_url'],'?'))}{$data['url']}/">
                            <div class="layui-col-sm3" style="text-align:center;" >
                                <img src="{$data['img']}" style="width:150px;max-height: 140px;margin-top:30px" />
                            </div>
                            <div class="layui-col-sm9">
                                <h4 style="color:black;font-size:16px">{$data['title']}</h4>
                                <span class="date">{:str_replace("-"," / ",substr($data['create_time'],0,10))}</span>
                                <p style='color: #333;line-height: 24px;'>
                                    {:$data['miaodian']?strip_tags(substr(str_replace(explode("</p>",htmlspecialchars_decode($data['content']))[0],"",$data['content']),0,600)):strip_tags(substr($data['content'],0,600))}...
                                </p>
                            </div>
                            <div style="clear:both;"></div>
                        </a>
                    </div>
                    {/volist}

                </div>
                <div class="layui-col-sm2 content-left" style="">
                    <div class="archives" style="margin:10px 0px;border: 1px solid #D3D4D8;padding:24px;">
                        <h3 style="padding-left: 20px;">{:lang('CATEGORIES')}</h3>
                        <ul class="archives-ul">
                            {volist name="$blogc" id="data"}
                            <li style="padding:5px 20px;text-align:left">
                                <a href="{:substr($base_data['current_url'],0,strrpos($base_data['current_url'],'?'))}categories/{:urlencode(str_replace(' ','-',strtolower($data['title_en'])))}/" style="text-decoration: none"><span class="layui-icon " style='color:#36648a;'>
                                </span>{$data['title']}<span>({$data['num']})</span></a>
                            </li>
                            {/volist}
                            <div style="clear: both;"></div>
                        </ul>
                    </div>
                </div>
                <div class="layui-col-sm12" style="padding: 10px 10px">
                    <style>
                        /*分页*/
                        .pagination{height: 32px;}
                        .pagination li { float: left;width:30px;height:30px;line-height: 30px;border-top:1px solid #e2e2e2;border-left:1px solid #e2e2e2;border-bottom:1px solid #e2e2e2;text-align:center;cursor:pointer; }
                        .pagination li a{width:100%;height:100%;display:inline-block;}
                        .pagination li:last-child{border-right:1px solid #e2e2e2}
                        .pagination .disabled{color:#e2e2e2}
                        .pagination .active{background:#36648a;color:#ffffff;height:32px;margin-top:-1px;line-height:32px}
                    </style>
                    {$blog|raw}
                </div>
            </div>
        </div>
    </div>
</div>
{include file="public/footer" /}


